<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
    <title>地址</title>
    <link href="/Public/zjdailyCard/css/bkmain.css" type="text/css" rel="stylesheet"/>
</head>
<body class="addressBg">
<!-------------激活成功---------------------->
<div class="uploadregstFail borderRadius">
    <p class="pFail"><span class="icon iconfont icon-tanhao"></span>激活成功！</p>
</div>
<!-------------激活失败------------------------>
<div class="uploadloginFail borderRadius">
    <p class="pFail"><span class="icon iconfont icon-tanhao"></span>激活失败！</p>
</div>
<!-------------激活失败------------------------->
<div class="bannerTop" style=" position:relative">
    <img src="/Public/zjdailyCard/images/bannerPhone2019.jpg" width="100%" class="phoneBanner">
    <img src="/Public/zjdailyCard/images/banner2019.jpg" class="bannerImage">
</div>
<div class="mask"></div>
<div class="main">
    <form>
        <ul class="ulAddress">
            <li>
                <span class="iconfont icon icon-lianxirenzheng"></span>

                <div class="spanAddress">
                    <span class="red boxSize">*</span>
                    <input placeholder="姓名" type="text" class="uploadTxt" name="username" id="username"
                           data-validate="nameFormat">

                    <div class="tipinfo">
                        <div class="error icon iconfont icon-iconfontgantanhao"></div>
                        <div class="valid icon iconfont icon-gou"></div>
                    </div>
                </div>
            </li>
            <li style="margin-bottom:30px;">
                <span class="iconfont icon icon-dianhua"></span>
                <input type="hidden" value="{$cardId}" name="cardId" id="cardId">

                <div class="spanAddress">
                    <span class="red boxSize">*</span>
                    <input placeholder="手机号码" type="tel" class="uploadTxt" name="telephone" id="telephone"
                           data-validate="telephoneFormat">

                    <div class="tipinfo">
                        <div class="error icon iconfont icon-iconfontgantanhao"></div>
                        <div class="valid icon iconfont icon-gou"></div>
                    </div>
                </div>
                <p class="pTips">&nbsp;&nbsp;*&nbsp;&nbsp;请输入十一位手机号码</p>
            </li>
            <li>
                <span class="iconfont icon icon-duoren"></span>

                <div class="spanAddress">
                    <span class="red boxSize">*</span>
                    <select class="uploadselect" id="metier" name="metier" data-validate="requireSelects">
                        <option value="">职业</option>
                        <option value="政府机关/事业单位">政府机关/事业单位</option>
                        <option value="国有企业">国有企业</option>
                        <option value="民营企业">民营企业</option>
                        <option value="离退休">离退休</option>
                        <option value="学生">学生</option>
                        <option value="其他">其他</option>
                    </select>

                    <div class="tipinfo">
                        <div class="error icon iconfont icon-iconfontgantanhao"></div>
                        <div class="valid icon iconfont icon-gou"></div>
                    </div>
                </div>
            </li>
            <li>
                <span class="iconfont icon icon-icon3"></span>

                <div class="spanAddress">
                    <span class="red boxSize">*</span>
                    <select class="provience provienceFix" data-validate="requireNotNull" name="province" id="province">
                        <option>------</option>
                    </select>
                    <select class="city cityFix" data-validate="requireNotNull" name="city" id="city">
                        <option>------</option>
                    </select>
                    <select class="region regionFix" data-validate="requireNotNull" name="county" id="region">
                        <option>------</option>
                    </select>

                    <div class="tipinfo">
                        <div class="error icon iconfont icon-iconfontgantanhao"></div>
                        <div class="valid icon iconfont icon-gou"></div>
                    </div>
                </div>
            </li>
            <li class="liTxt">
                <div class="spanAddress spanFr">
                    <span class="red boxSize">*</span><textarea placeholder="详细地址（市区县不必重复填写）" class="txtUpload boxSize"
                                                                name="address" id="address"
                                                                data-validate="requireLength" data-min="2"></textarea>

                    <div class="tipinfo">
                        <div class="error icon iconfont icon-iconfontgantanhao"></div>
                        <div class="valid icon iconfont icon-gou"></div>
                    </div>
                </div>
            </li>
        </ul>
    </form>
    <div class="intro"><span class="iconfont icon icon-icoyuan"></span>请保留好您的订阅卡，如有问题可拨打0571-85310140进行咨询或投诉。</div>
    <div class="intro"><span class="iconfont icon icon-icoyuan"></span>带“*”部分为必填内容，请完整填写</div>
    <div class="btn">
        <input type="button" value="下一步" class="sumiBtn borderRadius activate" id="sumiBtn"/>
    </div>

    <div class="divfooter mart100">
        <p>浙报新媒体技术支持</p>

        <p>联系方式：0571-85310140</p>

        <p class="pFooter">浙江日报新闻发展有限公司 | Copyright © 2018 - 2019</p>
    </div>
</div>
<script type="text/javascript" src="/Public/zjdailyCard/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Public/js/zjdailyCard/jquery.JPlaceholder.js"></script>
<script type="text/javascript" src="/Public/zjdailyCard/js/validateadd.js"></script>
<script type="text/javascript" src="/Public/zjdailyCard/js/bkmain.js"></script>
<script type="text/javascript" src="/Public/zjdailyCard/js/offline.china.js"></script>
<script type="text/javascript">
    var miniCity = (function () {
        var _provience = undefined;
        var _city = undefined;
        var _region = undefined;

        var _changeProvience = function (code) {
            !code && ( code = $(this).val() );
            var options = undefined;
            (code > 0) && $.get('/?m=user&c=miniCity&a=check', {code: code}, function (result) {
                options = "<option value=0>请选择市</option>";
                for (var i in result.sons) {
                    options += "<option value=" + result.sons[i].id + ">" + result.sons[i].regionname + "</option>";
                }
                //_provience.html( "" );
                _city.html("");
                //_provience.append( $( "<option value="+result.parent.id+">" + result.parent.regionname + "</option>") );
                _city.append($(options)).trigger("change");
            });
            (code == 0) && _city.html("<option value=0>请选择区县</option>").trigger("change");
        };
        var _changeCity = function (code, region) {
            !code && ( code = $(this).val() );
            ( code > 0 ) && $.get('/?m=user&c=miniCity&a=check', {code: code}, function (result) {
                options = "<option value=0>请选择区县</option>";
                for (var i in result.sons) {
                    options += "<option value=" + result.sons[i].id + ">" + result.sons[i].regionname + "</option>";
                }
                _region.html("");
                _city.find("option[value=" + code + "]").attr('selected', true);
                _region.append($(options));
                region && _region.find("option[value=" + region + "]").attr("selected", true);
            });
            ( code == 0) && _region.html("<option value=0>请选择区县</option>").trigger("change");
        };
        var changeRegion = function (code) {
        };

        var _initProvience = function (code, selected) {
            $.post('/?m=user&c=miniCity&a=checks', {codes: code}, function (result) {
                var options = "";
                for (var i in result) {
                    options += "<option value=" + result[i].id + ">" + result[i].regionname + "</option>"
                }
                _provience.html("");
                _provience.html(options);
                _provience.find("option[value=" + selected + "]").attr("selected", true);
            });
        }
        return {
            init: function (s_provience, s_city, s_region, provience, city, region) {
                _provience = $(s_provience);
                _city = $(s_city);
                _region = $(s_region);
                _initProvience([31], provience);
                provience && _changeProvience(provience);
                city && _changeCity(city, region);

                _provience.bind("change", function () {
                    _changeProvience($(this).val());
                });
                _city.bind("change", function () {
                    _changeCity($(this).val());
                });
            },
            //changeCity: _changeCity
        }
    })();
    miniCity.init(".provience", ".city", ".region", "31", "", "");
    $("#checkbox").attr("checked", false);
    $("#checkbox").click(function () {
        if ($("#checkbox").attr("checked") == "checked") {
            $("#sumiBtn").removeClass("gray");
            $("#sumiBtn").attr("disabled", false);
        } else {
            $("#sumiBtn").addClass("gray");
            $("#sumiBtn").attr("disabled", "disabled");
        }
    });
    $("#sumiBtn").click(function () {
        var data = $("form").serialize() + "&type=check";
        $.ajax({
            data: data,
            url: "/wap/zJDailyCard/active",
            dataType: 'json',
            type: 'post',
            success: function (res) {
                if (res.err != 200) {
                    alert(res.msg);
                } else {
                    var username = $("#username").val();
                    var telephone = $("#telephone").val();
                    var province = $("#province").val();
                    var city = $("#city").val();
                    var county = $("#region").val();
                    var address = $("#address").val();
                    var metier = $("#metier").val();
                    var cardId = $("#cardId").val();
                    window.location = "/Wap/ZJDailyCard/check?username=" + username + "&telephone=" + telephone + "&province="
                        + province + "&city=" + city + "&county=" + county + "&address=" + address + "&metier=" + metier + "&cardId=" + cardId;
                }
            }
        });
    });
</script>
</body>
</html>
